<template>
    <div class="container">
        <WeatherCom v-model:reportFlag="reportFlag" @trans-list="getListHandler"></WeatherCom>
        <ReportCom v-if="reportFlag" v-model:reportFlag="reportFlag" :future="future"></ReportCom>
    </div>
</template>

<script lang='ts' setup>
import { getWeather } from '@/api/WeatherApi';
import ReportCom from '@/components/weather/ReportCom.vue';
import WeatherCom from '@/components/weather/weatherCom.vue';
import { onBeforeMount, ref, type Ref } from 'vue';
// 在父组件中定义一个控制右侧天气预报组件渲染的变量
const reportFlag: Ref<boolean> = ref(false)
// list
const future:Ref<any[]> = ref([])
// 接收子组件当中传过来的预报数据，并把这个数据传递给预报子组件
const getListHandler = (list: Array<any>) => {
    future.value = list
}

</script>

<style lang='scss' scoped>
.container {
    height: 100%;
    width: 100%;
    position: relative;
}
</style>